<template>
  <div class="childId">
    <template v-if="isShow">
      <div class="addAccount_box">
        <el-tooltip effect="light" placement="top" popper-class="mytooltip">
          <div slot="content">
            1.用户购买会员后，系统根据会员级别判断可添加的子账号个数。
            <br />2.主账号与子账号享受同等权限。
            <br />3.主张号与子账号共用会员所有权限次数。
            <br />4.一个子账号只可登录一台设备（电脑及浏览器）。
            <br />5.添加的账号必须为平台已经在平台注册过的手机号。添加的子账号不可为已经被绑定为子账号的手机号。
            <br />6.添加后的子账号原有会员权限消失，会员权限与绑定的主账号一致，解除绑定后，恢复原有会员权限（如：添加子账号时，会员到期时间为2021/8/1，解除绑定后，会员到期时间不变依旧为2021/8/1）。
            <br />7.子账号若是升级或者续费即变为主账号，并且自动与原主账号解除绑定。
            <br />8.主账号会员到期时，将失去子账号权限，子账号自动与主账号解除绑定，当主账号再次续费会员时，之前子账号需重新添加。
          </div>
          <img src="@/assets/meng/search_result04.png" alt style="width:16px;height:16px" />
        </el-tooltip>
        <p>规则说明</p>

        <button class="addAccount" @click="addAccount">
          <img src="@/assets/liu/add.png" alt />
          添加子账号
        </button>
      </div>

      <table class="table01">
        <thead>
          <tr>
            <th>账号</th>
            <th>绑定时间</th>
            <th>到期时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody v-if="SubAccountList.length&&!loading">
          <tr v-for="item, i in SubAccountList" :key="i+'aa'">
            <td>
              {{item.phone}}
              <span v-if="item.remarks">({{item.remarks}})</span>
            </td>
            <td>{{item.bindingTime}}</td>
            <td>{{item.vipEndTime}}</td>
            <td>
              <button class="remarks" @click="addRemarks(item.id,item.remarks)">备注</button>
              <button class="del" @click="delUnbind(item)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
      <div
        v-loading="loading"
        v-if="loading"
        class="loading"
        element-loading-text="拼命加载中..."
        element-loading-spinner="el-icon-loading"
      ></div>
      <div class="zw" v-if="!SubAccountList.length&&!loading">
        <img src="@/assets/liu/zw.png" />
        <p>暂无数据</p>
      </div>
    </template>
    <template v-if="!isShow">
      <div class="subAccount">
        <p>当前账号为子账号，无法添加子账号。</p>
        <p>升级主账号，解锁更多权限！</p>
        <button @click="Routinghop">立即购买</button>
      </div>
    </template>
    <el-dialog :visible.sync="dialog01" width="500px" top="20vh">
      <div class="bindWx">
        <template v-if="!countLoading">
          <div class="addAccountPop">
            <p class="title">添加子账号</p>
            <p>
              还可以添加
              <span>{{BindingInfo.subAccountCount+'/'+BindingInfo.limitQuantity}}</span>
              个账号
            </p>
          </div>
          <div class="inpBox">
            <input
              @focus="phoneFocus"
              class="inp"
              v-model="phone"
              :class="active?'active':''"
              @blur="splitText"
              placeholder="请输入子账号的手机号码"
              type="number"
              @keyup.enter="Binding"
            />
            <p v-show="!errPrompt" class="ts">{{infoPhone}}</p>
            <input
              @focus="codeFocus"
              @blur="splitText1"
              :class="active1?'active':''"
              class="inp1"
              v-model="code"
              placeholder="请输入子账号验证码"
              type="text"
              @keyup.enter="Binding"
            />
            <button class="btn" :class="{ timering: isTimering }" @click="get_code">{{time}}</button>
            <p class="ts" v-show="!errPrompt1">{{errCode}}</p>
          </div>
          <button class="determine" @click="Binding">确定</button>
        </template>
        <div
          v-loading="countLoading"
          v-if="countLoading"
          class="countLoading"
          element-loading-text="拼命加载中..."
          element-loading-spinner="el-icon-loading"
        ></div>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialog02" width="500px" top="20vh">
      <div class="delPop">
        <p class="title">提示</p>
        <div>
          <p v-if="del">
            是否删除子账号 {{item.phone}}
            <span v-if="item.remarks">({{item.remarks}})</span>
          </p>
          <p v-else>添加后原有会员级别将消失，请谨慎输入。</p>
          <button class="btn" @click="dialog02 = false">取消</button>
          <button @click="Unbind" class="btn1">确定</button>
        </div>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialog03" width="500px" top="20vh">
      <div class="addRemarksPop">
        <p class="title">添加备注</p>
        <div class="inpD">
          <input
            :class="active2?'active':''"
            @focus="valueFocus"
            @blur="splitText2"
            v-model.trim="dialogValue"
            maxlength="10"
            placeholder="请输入账号备注，十个字以内"
            type="text"
          />
          <p v-show="isBz" class="ts textLeft">备注不能为空</p>
        </div>
        <div>
          <button @click="UpdateRemark">确定</button>
        </div>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialog04" @close="close" width="500px" top="20vh">
      <div class="delPop">
        <p class="title">提示</p>
        <div>
          <p v-if="SubAccountTips.length==1">
            您好，您的子账号
            <span
              v-for="item,i in  SubAccountTips"
              :key="i+'oo'"
            >{{item.phone}}于{{item.relieveTime}}</span>
            升级为主账号，自动与主账号解除绑定。
          </p>
          <p v-else>
            您好，您的子账号
            <span
              v-for="item,i in  SubAccountTips"
              :key="i+'oo'"
            >{{item.phone}}于{{item.relieveTime}}</span>
            升级为主账号，自动与主账号解除绑定。
          </p>
          <button class="btn1" @click="dialogDel">确定</button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      countLoading: false,
      loading: false,
      BindingInfo: {},
      errCode: '验证码格式错误',
      infoPhone: '手机号格式错误',
      isBz: false,
      del: false,
      item: '',
      id: null, //删除子账户
      isShow: true,
      dialog01: false,
      dialog02: false,
      dialog03: false,
      dialog04: false,
      phone: '',
      dialogValue: '',
      time: '获取验证码',
      active: false,
      active2: false,
      active1: false,
      errPrompt: true,
      errPrompt1: true,
      code: '',
      isTimering: false,
      SubAccountList: [],
      Remarks: '',
      loopTime: null,
      SubAccountTips: []
    };
  },
  components: {},
  watch: {
    // // 限制10个字符
    // dialogValue(n) {
    //   if (n > 10) {
    //     this.dialogValue = n.slice(0, 10);
    //   }
    // }
  },
  created() {
    this.getperson();
    this.GetUnboundTips();
  },
  mounted() {},
  methods: {
    close() {
      this.$axios
        .post('/api/CustomerSubAccount/DelUnboundTips')
        .then(res => {})
        .catch(err => {
          console.log(err);
        });
    },
    // 子账户解绑提示
    GetUnboundTips() {
      this.$axios.post('/api/CustomerSubAccount/GetUnboundTips').then(res => {
        if (res.data.data.length) {
          this.dialog04 = true;
          this.SubAccountTips = res.data.data;
          if (this.SubAccountTips.length > 1) {
            this.SubAccountTips.forEach(element => {
              element.relieveTime = element.relieveTime + '、';
            });

            this.SubAccountTips[this.SubAccountTips.length - 1].relieveTime = this.SubAccountTips[
              this.SubAccountTips.length - 1
            ].relieveTime.slice(
              0,
              this.SubAccountTips[this.SubAccountTips.length - 1].relieveTime.length - 1
            );
          }
        }
      });
    },
    // 关闭弹窗删除子账户解绑提示
    dialogDel() {
      this.dialog04 = false;
      this.$axios
        .post('/api/CustomerSubAccount/DelUnboundTips')
        .then(res => {})
        .catch(err => {
          console.log(err);
        });
    },

    GetBindingCountInfo() {
      this.countLoading = true;
      this.$axios.post('/api/CustomerSubAccount/GetBindingCountInfo').then(res => {
        if (res.data.code == 0) {
          this.countLoading = false;
          this.BindingInfo = res.data.data;
        }
      });
    },
    // 点击添加子账号
    addAccount() {
      this.errCode = '验证码格式错误';
      this.infoPhone = '手机号格式错误';
      this.time = '获取验证码';
      clearInterval(this.loopTime);
      this.dialog01 = true;
      this.errPrompt = true;
      this.errPrompt1 = true;
      this.phone = '';
      this.code = '';
      this.GetBindingCountInfo();
      // 获取当前账户的子账户数量和限制数量
    },
    // 判断是否为子账号
    getperson() {
      this.loading = true;
      this.$axios.get('/api/customer/getperson').then(res => {
        if (res.data.code == 0) {
          if (res.data.data.bindType != 2) {
            this.isShow = true;
            this.GetCustomerSubAccountList();
            // this.GetBindingCountInfo();
          } else {
            this.isShow = false;
          }
        }
      });
    },
    // 点击删除
    delUnbind(item) {
      this.dialog02 = true;
      this.item = item;
      this.del = true;
    },
    // 确认删除子账户
    Unbind() {
      if (this.del) {
        this.$axios
          .post('/api/CustomerSubAccount/Unbind', {
            ID: this.item.id
          })
          .then(res => {
            if (res.data.code == 0) {
              this.dialog02 = false;
              this.SubAccountList = [];
              this.GetCustomerSubAccountList();
            }
          })
          .catch(err => {
            console.log(err);
          });
      } else {
        this.$axios
          .post('/api/CustomerSubAccount/Binding', {
            Phone: this.phone,
            code: this.code
          })
          .then(res => {
            if (res.data.code == 0) {
              this.dialog01 = false;
              this.dialog02 = false;
              this.GetCustomerSubAccountList();
            }
          });
      }
    },
    // 子账户列表
    GetCustomerSubAccountList() {
      this.$axios.post('/api/CustomerSubAccount/GetCustomerSubAccountList').then(res => {
        this.loading = false;
        if (res.data.code == 0) {
          this.SubAccountList = res.data.data;
        }
      });
    },
    //绑定子账户
    Binding() {
      let that = this;
      if (this.time == '获取验证码') {
        this.errCode = '请先获取验证码';
        this.errPrompt1 = false;
      }
      // else {
      //   this.errCode = '验证码格式错误';
      // }

      const str = /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/;
      if (!str.test(this.phone) || this.phone.length == 0 || this.phone.length != 11) {
        if (!this.phone) {
          this.infoPhone = '手机号不能为空';
        }
        that.errPrompt = false;
      } else {
        that.errPrompt = true;
      }
      if (this.time == '获取验证码') {
        return;
      }
      this.$axios
        .post('/api/CustomerSubAccount/BindingTips', {
          Phone: this.phone,
          Code: this.code
        })
        .then(res => {
          if (res.data.code == 0) {
            this.dialog02 = true;
            this.dialog01 = false;
            this.del = false;
            // console.log(res.deta.data);
          } else if (
            res.data.code == 10 ||
            res.data.code == 11 ||
            res.data.code == 9 ||
            res.data.code == 3 ||
            res.data.code == 8 ||
            res.data.code == 6
          ) {
            this.errPrompt = false;

            this.infoPhone = res.data.msg;
          } else if (res.data.code == 5) {
            this.errPrompt1 = false;

            this.errCode = res.data.msg;
          } else {
            this.errCode = res.data.msg;
          }
        });
    },
    // 续费跳转
    Routinghop() {
      let router = this.$router.resolve({
        path: '/talent_main/buy'
      });
      window.open(router.href, '_blank');
    },
    // 备注弹窗
    addRemarks(id, remarks) {
      this.id = id;
      this.isBz = false;
      this.Remarks = remarks;
      this.dialog03 = true;
      this.dialogValue = '';
    },
    UpdateRemark() {
      if (!this.dialogValue) {
        this.isBz = true;
        return;
      }
      this.$axios
        .post('/api/CustomerSubAccount/UpdateRemark', {
          Remarks: this.dialogValue,
          ID: this.id
        })
        .then(res => {
          if (res.data.code == 0) {
            this.dialog03 = false;
            this.GetCustomerSubAccountList();
          }
          console.log(res);
        });
    },
    // 点击获取验验证码
    // 获取验证码
    get_code() {
      let that = this;
      const str = /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/;
      if (!str.test(this.phone) || this.phone.length == 0 || this.phone.length != 11) {
        that.errPrompt = false;
        return;
      } else {
        that.errPrompt = true;
      }
      this.getsmsCode();
    },

    getsmsCode() {
      let that = this;
      if (this.time != '重新获取' && this.time != '获取验证码') {
        return false;
      }
      let temp = 60;
      this.time = temp + 's';
      this.isTimering = true;
      this.loopTime = setInterval(() => {
        temp -= 1;
        this.time = temp + 's';
        if (temp == 0) {
          clearInterval(this.loopTime);
          this.time = '重新获取';
          this.isTimering = false;
        }
      }, 1000);
      //   获取验证码
      this.$axios(
        {
          method: 'get',
          url: '/api/customer/getsms',
          params: {
            mobile: that.phone
          }
        },
        {
          cancelToken: new that.$axios.CancelToken(function executor(c) {
            if (that.cancel03) that.cancel03();
            that.cancel03 = c;
          })
        }
      )
        .then(response => {
          if (response.data.code == 0 && response.data.data == '') {
            this.register = true;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 获取焦点
    phoneFocus() {
      this.errPrompt = true;

      this.active = true;
    },
    codeFocus(id) {
      this.errCode = '验证码格式错误';
      this.errPrompt1 = true;
      this.active1 = true;
    },
    valueFocus(id) {
      this.isBz = false;
      this.active2 = true;
    },
    // 失去焦点
    splitText() {
      this.active = false;
      if (!this.phone) {
        this.infoPhone = '手机号不能为空';
      } else {
        this.infoPhone = '手机号格式错误';
      }

      let re = /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/;
      this.errPrompt = re.test(this.phone);
    },
    splitText1() {
      if (this.time == '获取验证码') {
        // if (this.code) {
        this.errCode = '请先获取验证码';
        // } else {
        //   this.errCode = '验证码格式错误';
        // }
      }
      this.active1 = false;
      if (this.code.length < 6) {
        this.errPrompt1 = false;
      } else {
        this.errPrompt1 = true;
      }
    },
    splitText2() {
      this.active2 = false;
    }
  },
  computed: {}
};
</script>

<style scoped lang="less">
.childId {
  padding: 20px;
  position: relative;
  .addAccount_box {
    margin-bottom: 15px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    p {
      font-size: 14px;
      color: #888;
      letter-spacing: 0 !important;
      margin-right: 10px;
      margin-left: 5px;
    }
    .el-tooltip {
      margin-top: 2px;
    }
    .addAccount {
      float: right;
      width: 103px;
      height: 32px;
      line-height: 30px;
      background-color: #fd7f2c;
      border-radius: 4px;
      font-size: 14px;
      color: #ffffff;
      display: flex;
      justify-content: center;
      > img {
        width: 12px;
        height: 12px;
        align-self: center;
        margin-right: 5px;
      }
    }
  }
  .table01 {
    width: 100%;
    thead {
      height: 48px;
      background-color: #f5f9ff;
      border-radius: 4px;
      tr {
        height: 48px;
        th {
          font-size: 14px;
          color: #555555;
          &:nth-child(1) {
            text-align: left;
            text-indent: 80px;
            width: 28%;
          }
          &:nth-child(2),
          &:nth-child(3) {
            width: 30%;
          }
        }
      }
    }
    tbody {
      tr {
        text-align: center;
        height: 60px;
        border-bottom: 1px solid #efefef;
        td {
          font-size: 14px;
          color: #222222;
          &:nth-child(1) {
            text-align: left;
            text-indent: 70px;
          }
        }
      }
    }
  }
  .remarks,
  .del {
    width: 54px;
    height: 32px;
    border-radius: 4px;
    border: solid 1px #fd7f2c;
    font-size: 14px;
    color: #fd7f2c;
    margin-right: 5px;
  }
  .bindWx {
    text-align: center;
    padding: 30px;
    box-sizing: border-box;
    // width: 460px;
    min-height: 309px;
    background-color: #ffffff;
    border-radius: 4px;

    .addAccountPop {
      display: flex;
      > p {
        &:nth-child(2) {
          font-size: 14px;
          color: #888888;
          align-self: flex-end;
          margin-left: 8px;
          span {
            font-size: 14px;
            color: #fd7f2c;
          }
        }
      }
    }
    .inpBox {
      width: 100%;
      text-align: center;
      padding-top: 32px;
      .inp {
        width: 360px;
        height: 45px;
        background-color: #ffffff;
        border-radius: 4px;
        border: solid 1px #e5e5e5;
        padding-left: 18px;
        box-sizing: border-box;
        margin: auto;

        color: #222;
      }
      .inp1 {
        width: 245px;
        height: 45px;
        padding-left: 18px;
        background-color: #ffffff;
        border-radius: 4px;
        border: solid 1px #e5e5e5;
        box-sizing: border-box;
        margin-right: 10px;
        color: #222;
        margin-top: 20px;
      }
      .btn {
        width: 101px;
        height: 45px;
        background-color: #ffffff;
        border-radius: 4px;
        border: solid 1px #e5e5e5;
        font-size: 14px;
        color: #222222;
      }
    }
    .determine {
      width: 360px;
      height: 50px;
      background-color: #ed8641;
      border-radius: 4px;
      font-size: 16px;
      font-weight: 600;
      color: #ffffff;
      margin-top: 30px;
    }
  }
  .title {
    font-size: 16px;
    font-weight: 600;
    position: relative;
    color: #222222;
    text-indent: 8px;
    &::after {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 4px;
      height: 16px;
      background-color: #fd7f2c;
      border-radius: 2px;
    }
  }
  .active {
    border: 1px solid #fd7f2c !important;
  }
  .timering {
    color: #888 !important;
  }
  .delPop {
    // width: 460px;
    min-height: 257px;
    background-color: #ffffff;
    border-radius: 4px;
    padding: 30px 30px 40px 30px;
    box-sizing: border-box;
    div {
      width: 100%;
      text-align: center;
      padding-top: 50px;

      p {
        padding-bottom: 50px;
        font-size: 16px;
        color: #222222;
      }
      .btn {
        width: 170px;
        height: 50px;
        font-size: 16px;
        font-weight: 600;

        border-radius: 4px;
        border: solid 1px #e5e5e5;
        margin-right: 15px;
        color: #888888;
      }
      .btn1 {
        width: 170px;
        height: 50px;
        font-size: 16px;
        font-weight: 600;
        border-radius: 4px;
        color: #ffffff;
        background-color: #fd7f2c;
      }
    }
  }
  .addRemarksPop {
    // width: 460px;
    // height: 283px;
    background-color: #ffffff;
    border-radius: 4px;
    padding: 30px 30px 40px 30px;
    box-sizing: border-box;
    .inpD {
      margin-top: 50px;
      margin-bottom: 50px;
    }
    div {
      text-align: center;
      input {
        width: 360px;
        height: 45px;
        background-color: #ffffff;
        border-radius: 4px;
        border: solid 1px #e5e5e5;
        padding-left: 18px;
        box-sizing: border-box;
      }

      button {
        width: 360px;
        height: 50px;
        background-color: #ed8641;
        border-radius: 4px;
        font-size: 16px;
        font-weight: 600;
        color: #ffffff;
      }
    }
  }
  .subAccount {
    width: 100%;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 330px;
    transform: translateX(-50%);
    p {
      &:nth-child(1) {
        font-size: 16px;
        color: #888888;
        margin-bottom: 15px;
      }
      &:nth-child(2) {
        font-size: 26px;
        font-weight: 600;
        color: #222222;
      }
    }
    button {
      width: 140px;
      height: 50px;
      background-color: #fd7f2c;
      border-radius: 4px;
      margin-top: 34px;
      font-size: 16px;
      font-weight: 600;
      color: #ffffff;
    }
  }
  .ts {
    width: 360px;
    font-size: 12px;
    color: #ea1b0b;
    text-align: left;

    // margin-left: 20px;

    margin: auto;
    margin-top: 5px;
  }
  .zw {
    margin-top: 280px;
  }
  .countLoading {
    margin-top: 100px;
  }
}
input {
  font-size: 14px;
  color: #222;
}
</style>
